@function px2rem($px) {
  @return 100 / 1920  * $px + vw;
}

 body, html {width: 100%; height: 100%; background: url("../img/show/bgShow.jpg");font-family: 'Microsoft YaHei',simsun;}
 .hide{
   display: none;
 }

.topHead { display: flex;border-radius: 0 px2rem(18) px2rem(18) 0;margin-bottom: px2rem(40);}
.headBox {
  width: px2rem(123);
  //height: px2rem(85);
  display: flex;
  padding: 0 px2rem(9);
  align-items: center;
  justify-content: space-between;
  background: #69aff9;
  .logo {

    width: px2rem(58);
    height: px2rem(43);
    position: relative;
    left: px2rem(20);
  }
  .div {
   width: 2px;
    height: px2rem(60);
    background-color: #fff;
  }
}

/* 隐藏垂直滚动条 */
.navContent::-webkit-scrollbar {
  width: 0;
}

/* 隐藏水平滚动条 */
.navContent::-webkit-scrollbar {
  height: 0;
}

.navBox {
  position: relative;
  display: flex;
  img {
    height: px2rem(88);
    cursor: pointer;
  }
  .navContent {
    display: flex;
    background: #69aff9;
    width:px2rem(700);
    overflow-x:auto;
  }
  .nav {
    height: px2rem(85);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    padding:0 px2rem(34);
    font-size: px2rem(26);
    color:#a7d3ff;
    &.active {
      color:#ffe684;
    }
  }

}

.imgBox {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.dialog {
  //display: none;
  .inner {
    width: px2rem(880);
    height: px2rem(600);
    position: fixed;
    margin-left: - px2rem(440);
    margin-top: - px2rem(300);
    left: 50%;
    top:50%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    img {
      max-width: 100%;
      max-height: 100%;
    }
    #dialogVideo {
      width: 100%;
      height: 100%;
    }
  }
  .mark {
    position: fixed;
    left:0;
    top:0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
  }
}

.carouselWrap {
  .swiper-slide {
    height: px2rem(857);
    padding-top: px2rem(86);
    padding-left: px2rem(25);
    display: flex;
    flex-wrap: wrap;
    &.type2 {
       .bottomTtitle {
         position: absolute;
         bottom:0;
         left:0;
         height: px2rem(84);
         right: 0;
         background: rgba(0,0,0,0.2);
         color:#fff;
         font-size: px2rem(28);
         align-items: center;
         padding-left: px2rem(20);
         padding-right: px2rem(20);
         width: px2rem(500);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         line-height: px2rem(84);
       }
    }
    &.type3 {
      padding-top: 0;
      padding-left: 0;
      .bottom_type3 {
        left:0;
        position: absolute;
        bottom:0;
        right: 0;
        color:#fff;
        height: px2rem(120);
        background: rgba(0,0,0,0.2);
        font-size: px2rem(38);
        align-items: center;
        display: flex;
        padding-left: 50px;
      }
    }
    .item {
      flex: none;
      width: px2rem(500);
      height: px2rem(270);
      border-radius: px2rem(20);
      margin: 0 px2rem(50);
      display: flex;
      cursor: pointer;
      padding: px2rem(44) px2rem(32);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
      .imgBox {
        width: px2rem(130);
        height: px2rem(176);
        margin-right: px2rem(30)
      }
      .titleBox {
        color:#fff;
        padding-top: px2rem(30);
        .title1 {
          font-weight: bold;
          font-size: px2rem(32);
          margin-bottom: px2rem(36);
        }
        .title2 {
          font-size: px2rem(26);
        }
      }
      &:nth-of-type(4) {
        margin:0  px2rem(50) 0 px2rem(110);
      }
    }
  }
}

.orange {
  background-image: linear-gradient(to bottom,#f9bb46,#f18d19);
}

.purple {
  background-image: linear-gradient(to bottom,#aea1ef,#7f77f8);
}

.green {
  background-image: linear-gradient(to bottom,#00dc7b,#04c077);
}

.blue {
  background-image: linear-gradient(to bottom,#8496ff,#5368d7);
}

.deepRed {
  background-image: linear-gradient(to bottom,#f77a8b,#ee4964);
}

.blue2 {
  background-image: linear-gradient(to bottom,#59c6fe,#1c94fd);
}


body .layui-layer-loading .layui-layer-content {
  margin: 0 auto;
}
